<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-input placeholder="请输入内容" v-model="query" clearable @clear="getUserList">
          <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
        </el-input>
      </el-col>
<el-col :span="2"><el-button type="primary" @click="adddialogVisible = true" class="add_btn">添加用户</el-button></el-col>
    </el-row>
    <el-table :data="userList.slice((currentPage-1)*5,currentPage*5)" style="width: 100%" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="mobile" label="电话"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="gender" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.gender===0">保密</span>
          <span v-if="scope.row.gender===1">男</span>
          <span v-if="scope.row.gender===2">女</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="showeditForm(scope.row.id)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)" ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination  @current-change="handleCurrentChange" :current-page="currentPage" :page-size="5"
                    layout="total,prev, pager, next, jumper" :total="userList.length">
    </el-pagination>
  </el-card>
  <el-dialog title="添加用户" :visible.sync="adddialogVisible" width="40%" @close="resetAdd">
    <el-form :model="addUserForm" :rules="addUserrules" ref="addFormRef" label-width="70px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addUserForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addUserForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addUserForm.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input v-model="addUserForm.mobile"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="addUserForm.nickname"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="adddialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
  </el-dialog>
  <el-dialog title="修改用户" :visible.sync="editdialogVisible" width="30%" @close="resetedit">
    <el-form :model="editUserForm" :rules="editUserrules" ref="editFormRef" label-width="70px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="editUserForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editUserForm.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input v-model="editUserForm.mobile"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="editUserForm.nickname"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="editdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUser">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
    export default {
        name: "user",
      data(){
        var checkEmail=(rule,value,callback)=>{
const reg=/^\w+@\w+(\.\w+)+$/
          if(reg.test(value)){
             callback();
          }else {return callback(new Error('请输入合法的邮箱'))}
        }
        var checkMoblie=(rule,value,callback)=>{
          const reg= /^1[34578]\d{9}$/
            if(reg.test(value)){
               callback();
            }else {return callback(new Error('请输入合法的手机号'))}
        }
          return{
            query:'',
            userList:[],
            currentPage:1,
            adddialogVisible:false,
            addUserForm:{
              username:'',
              password:'',
              email:'',
              mobile:'',
              nickname:''
            },
            addUserrules:{
              username:[{required:true,message:'请输入用户名',trigger:'blur'},
                { min: 3, max: 10, message: '用户名在3~10个字符之间', trigger: 'blur' }],
              password: [{required:true,message:'密码不能为空',trigger:'blur'},
                {min: 6,max:15,message: '密码在6-15个字符之间',trigger:'blur'}],
              email:[{required:true,message:'请输入邮箱',trigger:'blur'},{
                validator:checkEmail,message: '邮箱格式不正确，请重新输入',trigger: 'blur'
              }],
              mobile: [{required:true,message:'请输入手机号',trigger:'blur'},
                {validator:checkMoblie,trigger: 'blur'}]
            },
            editdialogVisible:false,
            editUserForm:{
              username:'',
              email:'',
              mobile:'',
              nickname:''
            },
            editUserrules:{
          email:[{required:true,message:'请输入邮箱',trigger:'blur'},{
                validator:checkEmail,message: '邮箱格式不正确，请重新输入',trigger: 'blur'
              }],
              mobile: [{required:true,message:'请输入手机号',trigger:'blur'},
                {validator:checkMoblie,trigger: 'blur'}]
            }
          }

      },
      created() {
          this.getUserList();
      },
      methods:{
        handleCurrentChange(val) {
          this.currentPage = val
        },
        async getUserList(){
          const res=await this.$http.get('/api/user/getUserList?query='+this.query)
          if(res.data.status!==200){this.$message.error('获取列表失败')}
          else {
          this.userList=res.data.data;
          }
        },
        resetAdd(){
          this.$refs.addFormRef.resetFields();
        },
        addUser(){
          this.$refs.addFormRef.validate( async (valid) => {
            if (valid) {
              const res = await this.$http.post('/api/user/add', this.addUserForm)
              if (res.data.status !== 200) {
                return this.$message.error('添加用户失败')
              }
              this.$message.success('添加用户成功')
              this.adddialogVisible = false
              this.getUserList()
            } else {
              return this.$message.error('请填写完整的用户信息')
            }
          })
      },
        async showeditForm(id){
          const res=await this.$http.get('/api/user/search?id='+id)
          if(res.data.status!==200){return this.$message.error('获取用户信息失败')}
          else{
            this.editUserForm = res.data.data;
            this.editdialogVisible = true;
          }

        },
        resetedit(){
          this.$refs.editFormRef.resetFields();
        },
        editUser(){
          this.$refs.editFormRef.validate(async valid=>{
            if(valid){
             const resedit=await this.$http.put('/api/user/edit?id='+this.editUserForm.id,this.editUserForm)
              if(resedit.data.status!==200){
                this.$message.error('修改用户信息失败')
              }else {
                this.$message.success('修改用户信息成功')
                this.editdialogVisible=false
                this.getUserList()
              }
            }else {
              return this.$message.error('请填写完整用户信息')
            }
          })
        },
       async deleteUser(id){
         const delres=await this.$confirm('是否删除?', '提示', {
           confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err=>err);
         if(delres=="confirm"){
         const res=await this.$http.delete('api/user/del?id='+id)
           if(res.data.code!==1){this.$message.error('删除失败')}
           else{this.$message.success('删除成功')
           this.getUserList()}
         }else {
           this.$message.error('已经取消删除')
         }
        }
    }}
</script>

<style scoped>
.add_btn{
  margin: 20px;
}
</style>
